<template>
  <div class="login-container">
    <!-- <div class="logo-box">
      <img src="../../assets/login_logo.png" />
      <span></span>
      <h5>智慧工地管理云平台</h5>
    </div> -->
    <div class="login-box">
      <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="on"
          label-position="left"
        >
          <div class="title-container">
            <h3 class="title">登录</h3>
            <!-- <span></span> -->
          </div>
          <el-form-item prop="username">
            <el-input
              ref="username"
              prefix-icon="el-icon-user"
              v-model="loginForm.username"
              placeholder="请输入用户名"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              prefix-icon="el-icon-lock"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="code" style="margin-bottom:30px" class="verifyCodeItemCss">
            <el-input
              prefix-icon="el-icon-bell"
              v-model="loginForm.code"
              placeholder="请输入验证码"
            />
            <div id="v_container"></div>
          </el-form-item>
          <el-button
            :loading="loading"
            type="success"
            style="width: 100%;"
            @click.native.prevent="handleLogin"
            >登陆</el-button
          >
        </el-form>
        <div class="rightTitle">
            <div>智慧工地企业级监管平台<i></i></div>
            <div>Intelligent construction site enterprise supervision platform <i></i></div>
        </div>
    </div>
    
  </div>
</template>

<script>
import {GVerify} from '@/utils/identify'
import project from "@/components/common/project";
export default {
  name: "Login",
  components:{project},
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        code:'',
        randomStr: "blockPuzzle",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message:"账号不能为空"},
        ],
        password: [
          { required: true, trigger: "blur", message:"密码不能为空" },
        ],
        code: [
          { required: true, trigger: "blur", message:"验证码不能为空" },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      checked:false,
      //项目选择
      projectDialogVisible:false,
      projects:[],
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  mounted(){
    this.verifyCode = new GVerify('v_container')
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          let verifyFlag = this.verifyCode.validate(this.loginForm.code)
          if(!verifyFlag){
            this.$message.error('验证码错误')
            return
          }
          this.loading = true;
          this.$store.dispatch('user/login', this.loginForm).then((res) => {
            this.$router.push({
              name:"datav"
            })
             this.loading = false
          }).catch(()=>{this.loading = false})          
        } else {
          return false;
        }
      });
    }
  },
};
</script>


<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background: url("../../assets/loginbg.png") top center no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  display: flex;
//   flex-direction: column;
  justify-content:flex-start;
  align-items: center;
  .logo-box{
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    img{
      height: 60px;
    }
    span{
      width: 2px;
      height: 50px;
      background: rgba(255,255,255,0.48);
      margin: 0 20px;
    }
    h5{
      font-size: 40px;
      color: #fff;
      font-weight: normal;
      margin: 0;
    }
  }
  .login-box{
    width: 100%;
    display: flex;
    align-items: center;
    // border-radius: 6px;
    .rightTitle{
        width: 440px;
        position: absolute;
        color: #ffffff;
        right: 20%;
        text-align: justify;
        & div:nth-child(1){
            font-weight: 500;
            font-size: 40px;
        }
        i{
            display: inline-block;
            width: 100%;
        }
        & div:nth-child(2){
            font-weight: 400;
            font-size: 15px;
        }
    }
  }

  .login-form {
    height: 100%;
    position: absolute;
    // padding: 40px 0;
    margin: 0 auto;
    overflow: hidden;
    left: 15%;
    top: 35%;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    i{
      font-size: 18px;
    }
  }

  .title-container {
    position: relative;
    margin: 0px auto 30px auto;
    display: flex;
    // flex-direction: column;
    // align-items: center;
    .title {
      font-size: 42px;
      color: rgb(0, 0, 0);
      margin: 0 0 10px 0;
      text-align: center;
      font-weight: 500;
    }
    span{
      width: 47px;
      height: 2px;
      background: #1890FF;
      border-radius: 1px;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}

.verifyCodeItemCss{
  ::v-deep .el-form-item__content{
    display: flex;
    align-items: center;
  }
  #v_container{
    height: 40px;
  }

}
</style>
